<template>

    <div>
        <el-container class="body">

            <el-main class="main">

            </el-main>
            <el-aside width="600px" class="sidebar" >
                <div class="login">
                    <el-row style="padding: 140px 20px 70px 0px">
                        <el-col :span="18">
                            <div class="grid-content bg-purple"><h1><span class="lg-logo">结构健康监测系统</span></h1></div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple-light"><i class="el-icon-enter"></i>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24" style="padding: 0px 60px 0px 60px;">
                            <div class="grid-content bg-purple-dark">
                                <div class="ipt" style="position: relative; margin-bottom: 28px;"><i
                                        class="el-icon-admin"
                                        style="position: absolute;left: 15px;z-index: 999;top: 24px;"></i>
                                    <el-input size="medium" v-model="input" placeholder="请输入用户名"></el-input>
                                </div>

                                <div class="ipt" style="position: relative; margin-bottom: 35px;"><i
                                        class="el-icon-paswd"
                                        style="position: absolute;left: 15px;z-index: 999;top: 23px;"></i>
                                    <el-input size="medium" v-model="input" placeholder="请输入密码"></el-input>
                                </div>


                            </div>
                        </el-col>
                    </el-row>

                    <el-row style="padding: 0px 20px 0px 0px;">
                        <el-col :span="8" style="margin: 0px 0px 0px 4px;">
                            <div class="grid-content bg-purple">
                                <template>
                                    <!-- `checked` 为 true 或 false -->
                                    <el-checkbox v-model="checked">记住账号</el-checkbox>
                                </template>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div class="grid-content bg-purple-light"><span class="forget">忘记密码？</span></div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24" style="padding: 0px 60px 0px 60px">
                            <div class="grid-content bg-purple-dark">
                                <el-button size="medium" type="primary" class="btn-login"
                                           style="">
                                    登录
                                </el-button>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row style="position: absolute; bottom: 20px; left:0px;  text-align: center; min-width: 500px; border-top: 1px solid rgba(28,31,33,.1); line-height: 45px; margin: 0px 60px;">
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark" style="color: #93999F; font-size: 14px; ">Copyright
                                © 2006-2019结构检测系统 版权所有
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-aside>
        </el-container>


    </div>


</template>

<script>
    export default {
        name: "login",

        data() {
            return {
                input: '',
                checked: true
            };


        },



    }
</script>

<style scoped>
    .body {
        display: flex;
        width: 100%;
        height: 100vh;
        background-color: #ededed;

    }

    h1 {
        margin: 0px;
        padding: 0px;
    }

    .sidebar {
        position: relative;
        display: inline-block;
        height: 100%;
        overflow: hidden;
        width:600px;
    }

    .login {
        height: 100%;
        background-color: #fff;

    }

    .main {

        display: inline-block;
        width: 100%;
        background: url("../assets/bodymax.png") center no-repeat;
        background-size: cover;
        overflow: hidden;

    }

    .lg-logo {
        font-size: 38px;
        color: #000;
        line-height: 85px;
        font-weight: normal;
        display: inline-block;
        text-align: left;
    }

    .forget {
        color: #126ed5;
        font-size: 14px;
        text-align: right;
        float: right;
        cursor: pointer;
    }

    .forget:hover {
        text-decoration: underline;
    }

    .el-icon-admin, .el-icon-paswd {
        width: 20px;
        height: 20px;
        background-position: left 0px;
        background-image: url("../assets/loginico.png");
    }

    .el-icon-paswd {
        background-position: -28px 0px;
        height: 24px;
    }

    .el-icon-enter {
        width: 82px;
        height: 85px;
        background-position: -172px 0px;
        background-image: url("../assets/loginico.png");
    }

    .btn-login {
        width: 100%;
        margin: 60px 0px 0px 0px;
        background: #126ed5;
        border: 1px solid #126ed5;
    }

    @media screen and (max-width: 1440px) {

        .main {
            display: inline-block;
            width: 100%;
            background: url("../assets/bodybg.png") center no-repeat;
            background-size: cover;
            overflow: hidden;

        }

    }

</style>